﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>jQuery贪吃蛇网页版游戏代码 - 源码之家</title>
    <script src="js/jquery.min.js"></script>
    <style type="text/css" media="screen">
        * {
            margin: 0;
            padding: 0;
        }

        img {
            border: 0;
        }

        ol, ul, li {
            list-style: none;
        }

        body {
            background: #272323;
        }

        .wrap {
            width: 810px;
            height: 600px;
            margin: 100px auto;
            border: 2px solid #FFC400;
            padding: 0 1px 1px 0;
            position: relative;
            background: #0B0B0B;

        }

        .snake_wrap {
            width: 810px;
            height: 600px;
            position: absolute;
            top: 0px;
            left: 0px;
            overflow: hidden;
        }

        .snake_wrap li {
            width: 14px;
            height: 14px;
            background: #FFC400;
            float: left;
            margin: 1px 0 0 1px;
            position: absolute;
        }

        .food {
            width: 14px;
            height: 14px;
            background: #FFC400;
            position: absolute;
            top: 30px;
            left: 45px;
        }

        .Data, .explain {
            width: 200px;
            height: 605px;
            background: #0b0b0b;
            position: absolute;
            top: -2px;
            left: -210px;
        }

        .score {
            height: 70px;
            text-align: center;
            line-height: 70px;
            font-size: 40px;
            font-weight: bold;
            color: #ffc400;
        }

        .Data ul {
            width: 190px;
            height: 494px;
            border-top: 2px solid #ffc400;
            padding: 5px;
            overflow: hidden;
        }

        .Data ul li {
            width: 100%;
            color: #ffc400;
            line-height: 26px;
            padding: 3px 0 3px;
            overflow: hidden;
        }

        .Data ul li + li {
            border-top: 1px dashed rgba(255, 196, 0, 0.2);
        }

        .Data ul li span {
            display: block;
            float: left;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

        }

        .Data ul li span.NO {
            width: 40px;
        }

        .Data ul li span.name {
            width: 100px;
        }

        .Data ul li span.scoreList {
            float: right;
            text-align: right;
            width: 50px;
        }

        .clear_data {
            color: #ffc400;
            border-top: 1px solid #ffc400;
            text-align: center;
            padding: 5px 0;
            cursor: pointer;
        }

        .clear_data:hover {
            text-decoration: underline;
        }

        .zhez {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            text-align: center;
        }

        .start {
            display: block;
        }

        .zhez span {
            padding: 15px 250px;
            margin: 20px;
            border: 3px solid #D4A509;
            line-height: 40px;
            font-size: 22px;
            background: #0b0b0b;
            color: #ffc400;
            border-radius: 10px;
            cursor: pointer;
        }

        .zhez span:hover {
            background: #D4A509;
            color: #fff;
        }

        .start input {
            display: block;
            width: 200px;
            height: 50px;
            margin: 210px auto 100px;
            padding: 0 20px;
            outline: none;
        }

        .over p {
            font-weight: bold;
            font-size: 100px;
            color: rgba(255, 196, 0, 1);
            padding: 150px 0 100px;
        }

        .explain {
            left: auto;
            right: -210px;
            color: #ffc400;
            padding: 10px;
            width: 180px;
            height: 584px;
            font-size: 14px;
            line-height: 22px;
        }

        .explain h3 {
            font-size: 16px;
            padding: 5px 0 10px;
            margin-bottom: 10px;
            border-bottom: 1px solid #ffc400;
        }

        .explain p {
            padding: 3px 0;
        }

    </style>
    <script>
        $(function () {

            $('.game_start').on('click', function () {
                // 点击开始按钮.

                $(this).closest('.start').stop().hide();

                mySnakeFn();
                // 运行这个函数.
            });


            $('.game_over').on('click', function () {
                $('.start').stop().show();
                $(this).closest('.over').stop().hide();
                $('input[name=your_name]').val('');
            });


            $('.clear_data').on('click', function () {
                $('.ranking_list').empty();
            })

        });


        function mySnakeFn() {

            //全局变量对相
            var myVar = {
                    //移动控制变量
                    del_x: -15,
                    del_y: 0,
                    //初始长度
                    myscore: 0,
                    //移动速度
                    speed: 100,
                    // 移动.?速度???
                    // 和间隔,有关?

                    //计时器
                    itimes: null

                    // 存储定时器.

                }


                // 初始位置

            ;(function () {
                var arr_snake = [['300px', '390px'], ['300px', '405px'], ['300px', '420px']];
                $('.snake_wrap').empty();
                $('.snake_wrap').append('<li></li><li></li><li></li>');

                $('.snake_wrap li').each(function (value) {
                	// each函数?

                    $(this).css({'top': arr_snake[value][0], 'left': arr_snake[value][1]})
					// 这?[数组?
                })

            })(jQuery);
            // 这是什么?加;


            //键盘控制--上下左右暂停
            (function () {

                // ????

                //暂停判定
                var stop = true;

                $(document).keydown(function (event) {

                    switch (event.keyCode) {
                        //空格 暂停
                        case 32:
                            stop ? clearInterval(myVar.itimes) : run();
                            // 暂停.就让.循环停止????
                            // 	这是什么意思???
                            // 	两个函数?

                            stop = !stop;
                            break;
                        //左
                        case 37:
                            directionKey(-15, 0, true);
                            break;
                        //上
                        case 38:
                            directionKey(0, -15, false);
                            break;
                        //右
                        case 39:
                            directionKey(15, 0, true);
                            break;
                        //下
                        case 40:
                            directionKey(0, 15, false);
                            break;
                    }
                });
            })(jQuery);


            //方向判断
            function directionKey(y1, y2, bour) {
                if (!myVar.del_x === bour) {
                    myVar.del_x = y1;
                    myVar.del_y = y2;
                }
            }

            // 这里运行????


            function run() {
                // 运行.


                //计时器，每speed时刷新一次
                myVar.itimes = setInterval(function () {
                    //获取当前食物位置

                    var food_top = $('.food').position().top;
                    var food_left = $('.food').position().left;


                    //设置新增蛇头坐标
                    var header_top = $('.snake_wrap li').eq(0).position().top + myVar.del_y;
                    // ?

                    var header_left = $('.snake_wrap li').eq(0).position().left + myVar.del_x;
                    //当前蛇头颜色重置

                    $('.snake_wrap li').eq(0).css({'background': '#FFC400'});

                    //新增蛇头，并赋予样式
                    $('.snake_wrap').prepend('<li></li>');
                    $('.snake_wrap li').eq(0).css({
                        'left': header_left + 'px',
                        'top': header_top + 'px',
                        'background': '#fff'
                    });
                    //移除最后一节蛇尾
                    $('.snake_wrap li:last').remove();

                    //判断蛇是否吃到食物
                    if ((header_left == (food_left - 1)) && (header_top == (food_top - 1))) {
                        var last_top = $('.snake_wrap li:last').position().top;
                        var last_left = $('.snake_wrap li:last').position().left;
                        $('.snake_wrap').append('<li></li>');
                        $('.snake_wrap li:last').eq(0).css({'left': last_left + 'px', 'top': last_top + 'px'});

                        //刷新食物
                        foodRandom();

                        //蛇身长度
                        myVar.myscore++;
                        scoreFn(myVar.myscore);

                        //每加长5，速度提升10
                        if (!(myVar.myscore % 5) && myVar.speed > 10) {
                            clearInterval(myVar.itimes);
                            myVar.speed -= 10;
                            run();
                        }
                    }

                    //边界判断
                    borderDetection(header_top, header_left);
                    //自撞判断
                    selfDetection(header_top, header_left);
                }, myVar.speed)


                // 这里反复运行.[重复.区.]

            }

            run();

            //分数
            function scoreFn(x) {
                $('.score').html(x)
            }

            //食物
            function foodRandom() {
                var t = 40;
                var x = 54;
                var y = 0;


                var repeat = false;




                var top = parseInt(Math.random() * (t - y) + y);
                var left = parseInt(Math.random() * (x - y) + y);

                //判断食物与蛇身坐标是否重合
                $('.snake_wrap li').each(function () {
                    if ($(this).position().left == left && $(this).position().top == top) {
                    	// 检验.每一个的位置.???/
                        foodRandom();
                        // 这是递归???调用????[???true是执行.?]
                    } else {
                        repeat = true;
                    }
                });

                //如果食物没在蛇身上，定位食物
                if (repeat) {
                    $('.food').css({'top': top * 15 + 1 + 'px', 'left': left * 15 + 1 + 'px'});
                    // 设置?[?规则?]
                }
            }
            // ????

            foodRandom();

            // 边界判定
            function borderDetection(HT, HL) {
                if (HT < 0 || HT > 585 || HL < 0 || HL > 795) {

                    clearInterval(myVar.itimes);
                    gameOver();
                    rankingList()

                }
            }


            //自撞判定
            function selfDetection(HT, HL) {
                //从第二节开始，坐标是否与蛇头重合
                $('.snake_wrap li:gt(0)').each(function (index, val) {
                	// 头?gt(0)>0?

                    var this_top = $(this).position().top;
                    var this_left = $(this).position().left;
                    if (HL === this_left && HT === this_top) {
                        clearInterval(myVar.itimes);
                        gameOver();
                        rankingList()
                    }
                })

            }

            //游戏结束
            function gameOver() {
                $('.over').show();
            }

            //获取用户昵称
            function yourName() {
                if ($.trim($('input[name=your_name]').val()) !== '') {
                    return $('input[name=your_name]').val();
                } else {
                    return '游客';
                }
            }

            //排行榜
            function rankingList() {
                //添加新的记录
                var new_ranking = '<li><span class="NO">' + (1 + parseInt($('.ranking_list li').length)) + '</span><span class="name">' + yourName() + '</span><span class="score_list">' + myVar.myscore + '</span></li>';
                //排行榜容器
                var ranking_list = $('.ranking_list');

                //如果排行榜中有记录就进行排序，如果为空就直接添加

                if (ranking_list.has('li').length > 0) {
                    //记录长度
                    var li_len = $('.ranking_list li').length;
                    //冒泡排序，把新的记录排列到对应的位置上
                    for (var i = 0; i < li_len; i++) {

                        if (parseInt($('.ranking_list li').eq(i).children('span.score_list').html()) < parseInt(myVar.myscore)) {
                            $(new_ranking).insertBefore($('.ranking_list li').eq(i)).hide().slideDown();
                            break;
                        } else if (i == li_len - 1) {
                            $(new_ranking).appendTo(ranking_list).hide().slideDown();
                        }
                    }
                } else {
                    $(new_ranking).appendTo(ranking_list).hide().slideDown();
                }


                //重新添加排号序列
                $.each($('.ranking_list li'), function (index, value) {
                    $(this).children('.NO').html($(this).index() + 1)
                })
            }
            // 排行榜

        }
    </script>
</head>
<body>
<div class="wrap">

    <ul class="snake_wrap">
        <li class="light"></li>
        <li class="light"></li>
        <li class="light"></li>
    </ul>

    <span class="food"></span>

    <div class="Data">
        <div class="score">0</div>
        <ul class="ranking_list">
        </ul>
        <p class="clear_data">清除记录</p>
    </div>

    <div class="start zhez">
        <input type="text" name="your_name" placeholder="输入您的昵称">
        <span class="game_start">开始游戏</span>
        <!--		开始游戏-->
    </div>
    <div class="over zhez">
        <p><i>GAME OVER</i></p>
        <span class="game_over">重新开始</span>
    </div>

    <div class="explain">
        <h3>操作指南</h3>
        <p>输入游戏昵称（不输入默认“游客”）。</p>
        <p>点击“开始游戏”按钮启动游戏。</p>
        <p>使用键盘方向键（← ↑ → ↓）键来控制方向，空格键暂停。</p>
        <p>游戏开始后，每成功吃到食物，分数加1，身体会加长一块，随着蛇身的加长，速度也会上升。</p>
        <p>当蛇头跃出边界或者撞到自身时，游戏结束。</p>
    </div>
</div>

<div style="text-align:center;">
    <p>更多小游戏：<a href="http://www.mycodes.net/" target="_blank">源码之家</a></p>
</div>
</body>
</html>
